<template>
<div class="content">
  <div class="comics">
    <span class="search-box" v-show="isShow">
      <input type="text" v-model="searchParam.param" class="input" placeholder="搜索..." maxlength="30" autocomplete="off">
      <i class="icon-search search" @click="query()"></i>
    </span>
    <ul>
      <li v-for="item in tableData">
        <div class="item">
          <a @click="goLink('/detail',item)"><img :src="item.cover"></a>
          <span class="title">
            <a @click="goLink('/detail',item)">{{item.name}}</a>
          </span>
          <div><i class="icon-fire"></i> <a>{{item.hit}}</a> <i class="el-icon-star-on"></i> <a>{{item.favor}}</a></div>
          <span>最新 <a href="#"> {{item.chapter}}章</a></span>
        </div>
      </li>
    </ul>
    <div class="pager" >
      <div v-show="totalCount===0">暂无数据！</div>
      <el-pagination v-show="totalCount!=0" layout="prev, pager, next" :current-page="currentPage" :total=totalCount @current-change="handleCurrentChange"></el-pagination>
    </div>
  </div>
</div>
</template>

<script>
import {mapMutations, mapGetters} from 'vuex'
export default {
  data () {
    return {
      searchParam: {},
      tableData:[],
      totalCount: 0,
      currentPage: 1,
      parm: ''
    }
  },
  created () {
    this.getData()
  },
  methods: {
    ...mapMutations({
      setComics: 'SET_COMICS',
      setIsShow: 'SET_ISSHOW'
    }),
    query () {
      this.setIsShow(false)
      if(this.searchParam.param !== undefined){
        this.searchParam.flag = 1
        this.getData()
      }
    },
    getData() {
      var _this = this
      this.$ajax.post('/api/getComics',_this.searchParam).then(function(response){
        _this.tableData = response.data.data.content
        console.log(response.data)
        _this.searchParam.flag = 0
        _this.totalCount = response.data.data.totalElements
      }).catch(function(error){console.log(error)})
    },
    handleCurrentChange(val) {
      this.searchParam.page = val-1
      this.currentPage = val
      this.getData()
    },
    goLink (path,item) {
      this.$router.push({ 
        path: path,
        query:{cid: item.cid}
      })
    },
  },
  computed: {
    ...mapGetters([
      'param',
      'isShow'
    ])
  },
  watch:{
    parm(val){
      console.log(val)
    }
  }
}
</script>

<style scoped lang="stylus" rle="stylesheet/stylus">
a
  text-decoration none
  color red
a:hover
  cursor pointer
.comics
  width 1168px
  margin 0 auto
  .search-box
    line-height 30px
    position absolute
    display inline-block
    width 60%
    margin 0px 0px
    top 16px
    left 20px
    max-width 100%
    height 30px
    padding 0
    border none
    z-index 11
    input
      font-size 14px
      line-height 30px
      position absolute
      top 0
      left 0
      width 100%
      height 30px
      padding 0 40px 0 18px
      border 1px solid #FFE1FF
      border-radius 20px
      outline 0
      color #6C7B8B
      background-color #fff
    input:hover
      border 1px solid #FFD1FF
    .search
      position relative
      margin 2px 0 0 3px
      float right

      color rgba(246, 71, 95, 0.4)
      font-size 22px
      right -50px
    .search:hover
      color $color-icon-mini
  ul
    li
      list-style none
      display block
      margin 10px 16px
      display inline-block
      overflow hidden
  .pager
    margin 35px
    text-align center
.item
  height 268px
  width 148px
  font-size 13px
  .title
    font-size 15px
  img
    height 200px
    border-radius 8px
    box-shadow 0 0 5px #444

@media screen and (max-width: 960px) {
  .comics{
    width 680px
  }
  .comics ul li{
    margin 5px 10px
  }
  ul{
    -webkit-padding-start 0
  }
}
@media screen and (max-width: 680px) {
  .comics{
    width 346px
  }
  .comics ul li{
    margin 5px 12px
  }
}
</style>
